<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="bookname" placeholder="请输入书名">
    <input type="text" id="author" placeholder="请输入作者">
    <input type="text" id="publisher" placeholder="请输入出版社">
    <button id="add">添加</button>
    <button id="search">查询</button>

    <table>
        <thead>
            <tr>
                <th>id</th>
                <th>书名</th>
                <th>作者</th>
                <th>出版社</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- <tr>
                <td>1</td>
                <td>西游记</td>
                <td>吴承恩</td>
                <td>北京出版社</td>
                <td>
                    <button class="del-btn">删除</button>
                </td>
            </tr> -->
        </tbody>
    </table>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        // API信息
        const baseURL = 'http://www.liulongbin.top:3006';
        const searchAPI = '/api/getbooks';
        const addAPI = '/api/addbook';
        const delAPI = '/api/delbook';

        // 1. 选择器
        const booknameInp = document.querySelector('#bookname');
        const authorInp = document.querySelector('#author');
        const publisherInp = document.querySelector('#publisher');
        const addBtn = document.querySelector('#add');
        const searchBtn = document.querySelector('#search');
        const tbody = document.querySelector('tbody');

        function search (params) {
            tbody.innerHTML = '';
            axios({
                method: 'get',
                url: baseURL + searchAPI,
                params,
            }).then((res) => {
                for (const item of res.data.data.sort((a, b) => a.bookname.length - b.bookname.length)) {
                    // item: {id: 1, bookname: '西游记', author: '吴承恩', publisher: '北京图书出版社'}
                    const tr = document.createElement('tr');
                    tr.innerHTML = `
                        <td>${item.id}</td>
                        <td>${item.bookname}</td>
                        <td>${item.author}</td>
                        <td>${item.publisher}</td>
                        <td>
                            <button onclick="del(${item.id})" class="del-btn">删除</button>
                        </td>
                    `;
                    tbody.appendChild(tr);
                }
            });
        }

        function del (id) {
            axios({
                method: 'get',
                url: baseURL + delAPI,
                params: {
                    id,
                },
            }).then((res) => {
                alert(res.data.msg);
                if (res.data.status === 200) {
                    search();
                }
            });
        }

        search();

        // 新增
        addBtn.addEventListener('click', () => {
            axios({
                method: 'post',
                url: baseURL + addAPI,
                data: {
                    bookname: booknameInp.value.trim(),
                    author: authorInp.value.trim(),
                    publisher: publisherInp.value.trim(),
                },
                params: {
                    msg: '嘿嘿',
                },
            }).then((res) => {
                if (res.data.status === 502) { // 失败
                    alert(res.data.msg);
                } else {
                    search();
                }
            });
        });

        // 查询
        searchBtn.addEventListener('click', () => {
            search({
                bookname: booknameInp.value.trim(),
                author: authorInp.value.trim(),
                publisher: publisherInp.value.trim(),
            });
        });

    </script>
</body>
</html>